<!-- 我的钱包 -->
<template>
	<view class="wallet-wrap">

		<view class="head_box u-flex u-row-center u-col-center">
			<view class="card-box">
				<view class="card-head u-flex u-col-center">
					<view class="card-title u-m-r-10">自购补贴（元）</view>
					<view @tap="showMoney = !showMoney" class="u-iconfont"
						:class="showMoney ? 'uicon-eye' : 'uicon-eye-off'" style="color: #fff;font-size: 46rpx;"></view>
				</view>
				<view class="card-head u-flex  uni-row u-p-t-40" style="-webkit-flex: 1;flex: 1;">
					<view style="-webkit-flex: 1;flex: 1; " class="money-num">
						{{ showMoney ? (shopincome_payment+shoporder_payment) || '0.00' : '*****' }}
					</view>
					<view style="-webkit-flex: 1;flex: 1;" class="card-head u-flex">
						<view style="-webkit-flex: 1;flex: 1;">
							<view class="title u-ellipsis-1">冻结金额</view>
							<view class="add font-OPPOSANS">
								{{shoporder_payment?shoporder_payment:'0.00'}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 筛选 -->
		<u-sticky offset-top="0" :enable="true">
			<!-- 	<view class="filter-box u-flex u-row-between">
				<button class="u-reset-button date-btn u-flex" @tap="showCalendar = true">
					{{ selDateText }}
					<text class="u-iconfont uicon-arrow-down-fill u-m-l-20" style="color: #e5e5e5"></text>
				</button>
				<view class="total-box">收入￥{{ incomeMoney || '0.00' }} 支出￥{{ expendMoney || '0.00' }}</view>
			</view> -->
			<!-- 状态分类 -->
			<view class="u-flex nav-box">
				<view class="state-item u-flex-1 " v-for="(state, index) in statusList" :key="state.value"
					@tap="onTab(state.value)">
					<text class="state-title"
						:class="{ 'title-active': stateCurrent === state.value }">{{ state.name }}</text>
					<text class="underline" :class="{ 'underline-active': stateCurrent === state.value }"></text>
				</view>
			</view>
		</u-sticky>

		<!-- 钱包记录 -->
		<view class="content_box" v-if="stateCurrent=='yijiedong'">
			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
				<!-- 订单列表 -->
				<view class="order-list" v-for="(wallet, orderIndex) in walletLog" :key="wallet.id">
					<view class="order-head u-flex u-row-between">
						<text class="no">订单编号：{{ wallet.order.sn }}</text>
					</view>
					<view class="goods-order" v-for="goods in wallet.order.orderItems" :key="goods.id">
						<view class="order-content">
							<ljshop-mini-card :title="goods.name" :image="goods.thumbnail">
								<template #describe>
									<view class="order-sku u-ellipsis-1">
										<text class="order-num">数量:{{ goods.quantity || 0 }};</text>
										<text class="order-num" v-for="item in goods.specifications">{{item}}</text>
									</view>
								</template>
								<template #cardBottom>
									<view class="order-price-box u-flex ">
										<text class="order-price font-OPPOSANS"
											v-if="goods.type!='EXCHANGE'">￥{{ goods.price.toFixed(2) || 0 }}</text>
									</view>
								</template>
							</ljshop-mini-card>
						</view>
					</view>
					<view class="order-bottom">
						<view class="all-msg u-flex font-OPPOSANS">
							<text class="order-price font-OPPOSANS">订单金额:￥{{wallet.order.price.toFixed(2) || 0 }}</text>
							<text class="order-price font-OPPOSANS" style="color: red;margin-left: 30rpx;">   补贴金额:￥{{ wallet.amount.toFixed(2) || 0 }}</text>
						</view>

					</view>
				</view>

			</scroll-view>
		</view>
		
		<view class="content_box" v-if="stateCurrent=='weijiedong'">
			<scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box">
				<!-- 订单列表 -->
				<view class="order-list" v-for="(wallet, orderIndex) in orderList" :key="wallet.id">
					<view class="order-head u-flex u-row-between">
						<text class="no">订单编号：{{ wallet.sn }}</text>
					</view>
					<view class="goods-order" v-for="goods in wallet.orderItems" :key="goods.id">
						<view class="order-content">
							<ljshop-mini-card :title="goods.name" :image="goods.thumbnail">
								<template #describe>
									<view class="order-sku u-ellipsis-1">
										<text class="order-num">数量:{{ goods.quantity || 0 }};</text>
										<text class="order-num" v-for="item in goods.specifications">{{item}}</text>
									</view>
								</template>
								<template #cardBottom>
									<view class="order-price-box u-flex ">
										<text class="order-price font-OPPOSANS"
											v-if="goods.type!='EXCHANGE'">￥{{ goods.price.toFixed(2) || 0 }}</text>
									</view>
								</template>
							</ljshop-mini-card>
						</view>
					</view>
					<view class="order-bottom">
						<view class="all-msg u-flex font-OPPOSANS">
							<text class="order-price font-OPPOSANS">订单金额:￥{{wallet.price.toFixed(2) || 0 }}</text>
							<text class="order-price font-OPPOSANS" style="color: red;margin-left: 30rpx;">补贴金额:￥{{ wallet.rebate.toFixed(2) || 0 }}</text>
						</view>
		
					</view>
				</view>
		
			</scroll-view>
		</view>

		<!-- 空置页 -->
		<ljshop-empty v-if="isEmpty" marginTop="200rpx" :image="$IMG_URL + '/imgs/empty/no_data.png'" tipText="暂无数据~">
		</ljshop-empty>
		<!-- 更多 -->
		<u-loadmore v-if="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		<!-- 日期选择 -->
		<u-calendar v-model="showCalendar" ref="uCalendar" safeAreaInsetBottom mode="range" start-text="开始"
			end-text="结束" active-bg-color="#7063d2" active-color="#fff" range-bg-color="#e5e2ff" range-color="#7063d2"
			:customStyle="{ background: 'linear-gradient(90deg, #A36FFF, #5336FF)', boxShadow: '0 7rpx 11rpx 2rpx rgba(124, 103, 214, 0.34)' }"
			@change="selDate"></u-calendar>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				isEmpty: false,
				stateCurrent: 'yijiedong', //默认
				statusList: [{
						name: '已解冻',
						value: 'yijiedong'
					},
					{
						name: '未解冻',
						value: 'weijiedong'
					}
				],
				showMoney: true,
				//日期选择
				showCalendar: false,
				selDateText: '',
				walletLog: [], //钱包记录
				propsDate: '', //日期参数
				incomeMoney: '', //收入
				expendMoney: '', //支出
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 0,
				lastPage: 0,
				balance: 0,
				shopincome_payment: 0,
				shoporder_payment: 0,
				hasMore :false,
				orderList:[]

			};
		},
		computed: {

		},
		onShow() {
			this.currentPage = 0;
			this.lastPage = 0;
			this.walletLog = [];
			this.getWalletLog();
		},
		// 触底加载更多
		onReachBottom() {
			if (hasMore) {
				this.currentPage += 1;
					
				if(this.stateCurrent =="yijiedong"){
					this.getWalletLog()
				}
				if(this.stateCurrent =="weijiedong"){
						this.getwjdWalletLog()
				}
			}
		},
		methods: {
				onTab(value){
					this.stateCurrent= value;
					this.currentPage = 0;
					this.walletLog =[]
					this.orderList=[]
					if(this.stateCurrent =="yijiedong"){
						this.getWalletLog()
					}
					if(this.stateCurrent =="weijiedong"){
						this.getwjdWalletLog()
					}
				},

			// 钱包明细
			getWalletLog() {
				let that = this;
			 
				that.loadStatus = 'loading';
				that.$http('money.shop', {
					UId: uni.getStorageSync("UId"),
					page: that.currentPage
				}).then(res => {
					
					if (res.code === 1) {
						that.loadStatus = 'loadmore';
						that.balance = res.shopCommissionAmount
						if(res.list.length<20){
							this.hasMore=false;
						}
						else{
							this.hasMore=true;
						}
						if (that.currentPage == 0) {
							that.shopincome_payment = res.shopincome_payment;
							that.shoporder_payment = res.shoporder_payment;
							that.walletLog = res.list;
						}
						if (that.currentPage > 0 && res.list.length > 0) {

							that.walletLog = that.walletLog.concat(res.list);
						}

					}

				});
			},
			getwjdWalletLog() {
				let that = this;
			
			 
				that.loadStatus = 'loading';
				that.$http('money.wjdshop', {
					UId: uni.getStorageSync("UId"),
					page: that.currentPage
				}).then(res => {
						
					if (res.code === 1) {
						that.loadStatus = 'loadmore';
						that.balance = res.shopCommissionAmount
						if(res.list.length<20){
							this.hasMore=false;
						}
						else{
							this.hasMore=true;
						}
						if (that.currentPage == 0) {
						 
							that.orderList = res.list;
						}
						if (that.currentPage > 0 && res.list.length > 0) {
			
							that.orderList = that.orderList.concat(res.list);
						}
			
					}
			
				});
			}
		}
	};
</script>

<style lang="scss">
	// 钱包记录
	.flex-item {
		width: 33.3%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}
	
	.flex-item-V {
		width: 100%;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
	}
	
	.text {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: #ebebeb;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}
	
	.desc {
		/* text-indent: 40rpx; */
	}
	
	.flex-pc {
		display: flex;
		justify-content: center;
	}
	
	.wallet-list {
		width: 750rpx;
		padding: 30rpx;
		background-color: #ffff;
		border-bottom: 1rpx solid #eeeeee;
	
		.head-img {
			width: 70rpx;
			height: 70rpx;
			border-radius: 50%;
			background: #ccc;
		}
	
		.list-content {
			justify-content: space-between;
			align-items: flex-start;
			flex: 1;
	
			.title {
				font-size: 28rpx;
				color: #333;
				width: 400rpx;
			}
	
			.time {
				color: #c0c0c0;
				font-size: 22rpx;
			}
		}
	
		.money {
			font-size: 28rpx;
			font-weight: bold;
	
			.add {
				color: #7063d2;
			}
	
			.minus {
				color: #333333;
			}
		}
	}
	
	// 钱包
	.head_box {
		width: 750rpx;
		background-color: #fff;
		padding: 30rpx 0;
	
		.card-box {
			width: 690rpx;
			min-height: 300rpx;
			padding: 40rpx;
		    background-image: linear-gradient(to bottom, #E7B655, #F9C982);
			background-size: 100% 100%;
			box-shadow: 1rpx 5rpx 16rpx 0 rgba(94, 73, 195, 0.81);
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;
	
			.card-head {
				color: #fff;
				font-size: 30rpx;
			}
	
			.money-num {
				font-size: 70rpx;
				line-height: 70rpx;
				font-weight: 500;
				color: #ffffff;
			}
	
			.reduce-num {
				font-size: 26rpx;
				font-weight: 400;
				color: #ffffff;
			}
	
			.withdraw-btn {
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #ffffff;
				border-radius: 30px;
				font-size: 24rpx;
				font-weight: 500;
				color: #5848c4;
				position: absolute;
				right: 30rpx;
				top: 40rpx;
			}
	
			.topup-btn {
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30px;
				font-size: 24rpx;
				font-weight: 500;
				color: #fff;
				border: 1px solid #fff;
				position: absolute;
				right: 180rpx;
				top: 40rpx;
			}
		}
	}
	
	// 筛选
	
	.filter-box {
		height: 120rpx;
		padding: 0 30rpx;
		background-color: #f6f6f6;
	
		.date-btn {
			background-color: #fff;
			line-height: 54rpx;
			border-radius: 27rpx;
			padding: 0 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
		}
	
		.total-box {
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
		}
	}
	
	// 分类
	.state-item {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		border-bottom: 1rpx solid rgba(#999, 0.5);
	
		.state-title {
			color: #666;
			font-weight: 500;
			font-size: 28rpx;
			line-height: 90rpx;
		}
	
		.title-active {
			color: #333;
		}
	
		.underline {
			display: block;
			width: 68rpx;
			height: 4rpx;
			background: #fff;
			border-radius: 2rpx;
		}
	
		.underline-active {
			background: #5e49c3;
			display: block;
			width: 68rpx;
			height: 4rpx;
			border-radius: 2rpx;
		}
	}
	.order-nav {
		background: #fff;
		height: 80rpx;
	
		.nav-item {
			flex: 1;
	
			.item-title {
				font-size: 30rpx;
	
				font-weight: 400;
				color: rgba(51, 51, 51, 1);
				line-height: 76rpx;
			}
	
			.nav-line {
				width: 100rpx;
				height: 8rpx;
				background: #fff;
			}
	
			.line-active {
				background: rgba(230, 184, 115, 4);
			}
		}
	}
	
	.order-list {
		background: #fff;
		margin: 20rpx 0;
	
		.order-bottom {
			padding-bottom: 20rpx;
	
			.btn-box {
				// justify-content: flex-end;
			}
	
			.all-msg {
				font-size: 24rpx;
				color: #999;
				justify-content: flex-end;
				margin-bottom: 10rpx;
				padding: 0 30rpx;
	
				.all-unit {
					font-size: 20rpx;
				}
	
				.all-money {
					font-size: 26rpx;
					color: #333;
					font-weight: 500;
	
					&::before {
						content: '￥';
						font-size: 20rpx;
					}
				}
			}
	
			 
		}
	
		.order-head {
			padding: 0 25rpx;
			height: 77rpx;
			border-bottom: 1rpx solid #dfdfdf;
	
			.no {
				font-size: 26rpx;
				color: #999;
			}
	
			.state {
				font-size: 26rpx;
				color: #a8700d;
			}
		}
	
		.goods-order {
			border-bottom: 1px solid rgba(223, 223, 223, 0.5);
			padding: 20rpx 20rpx 0;
			margin-bottom: 20rpx;
	
			.order-content {
				padding-bottom: 20rpx;
	
				.order-sku {
					font-size: 24rpx;
	
					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					width: 450rpx;
					margin-bottom: 20rpx;
	
					.order-num {
						margin-right: 10rpx;
					}
				}
	
				.order-price-box {
					.status-btn {
						height: 32rpx;
						border: 1rpx solid rgba(207, 169, 114, 1);
						border-radius: 15rpx;
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(168, 112, 13, 1);
						padding: 0 10rpx;
						margin-left: 20rpx;
						background: rgba(233, 183, 102, 0.16);
					}
	
					.order-price {
						font-size: 26rpx;
	
						font-weight: 600;
						color: rgba(51, 51, 51, 1);
					}
				}
			}
		}
	}
</style>